<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="UTF-8">
    <title>Multiple Subgraphs with Different Layout</title>
  </head>
  
  <body>
    <div id="mountNode"></div>
    <script src="../build/g6.js"></script>
    <script>
      const data = {
        "nodes": [{
          "id": "0",
          "label": "0"
        },
        {
          "id": "1",
          "label": "1"
        },
        {
          "id": "2",
          "label": "2"
        },
        {
          "id": "3",
          "label": "3"
        },
        {
          "id": "4",
          "label": "4"
        },
        {
          "id": "5",
          "label": "5"
        },
        {
          "id": "6",
          "label": "6"
        },
        {
          "id": "7",
          "label": "7"
        },
        {
          "id": "8",
          "label": "8"
        },
        {
          "id": "9",
          "label": "9"
        },
        {
          "id": "10",
          "label": "10"
        },
        {
          "id": "11",
          "label": "11"
        },
        {
          "id": "12",
          "label": "12"
        },
        {
          "id": "13",
          "label": "13"
        },
        {
          "id": "14",
          "label": "14"
        },
        {
          "id": "15",
          "label": "15"
        },
        {
          "id": "16",
          "label": "16"
        },
        {
          "id": "17",
          "label": "17"
        },
        {
          "id": "18",
          "label": "18"
        },
        {
          "id": "19",
          "label": "19"
        },
        {
          "id": "20",
          "label": "20"
        },
        {
          "id": "21",
          "label": "21"
        },
        {
          "id": "22",
          "label": "22"
        },
        {
          "id": "23",
          "label": "23"
        },
        {
          "id": "24",
          "label": "24"
        },
        {
          "id": "25",
          "label": "25"
        },
        {
          "id": "26",
          "label": "26"
        },
        {
          "id": "27",
          "label": "27"
        },
        {
          "id": "28",
          "label": "28"
        },
        {
          "id": "29",
          "label": "29"
        },
        {
          "id": "30",
          "label": "30"
        },
        {
          "id": "31",
          "label": "31"
        },
        {
          "id": "32",
          "label": "32"
        },
        {
          "id": "33",
          "label": "33"
        },
        {
          "id": "34",
          "label": "34"
        },
        {
          "id": "35",
          "label": "35"
        },
        {
          "id": "36",
          "label": "36"
        },
        {
          "id": "37",
          "label": "37"
        },
        {
          "id": "38",
          "label": "38"
        },
        {
          "id": "39",
          "label": "39"
        },
        {
          "id": "40",
          "label": "40"
        }],
        "edges": [{
          "source": "0",
          "target": "1"
        },
        {
          "source": "0",
          "target": "2"
        },
        {
          "source": "0",
          "target": "3"
        },
        {
          "source": "0",
          "target": "4"
        },
        {
          "source": "0",
          "target": "5"
        },
        {
          "source": "0",
          "target": "7"
        },
        {
          "source": "0",
          "target": "8"
        },
        {
          "source": "0",
          "target": "9"
        },
        {
          "source": "0",
          "target": "10"
        },
        {
          "source": "0",
          "target": "11"
        },
        {
          "source": "0",
          "target": "13"
        },
        {
          "source": "0",
          "target": "14"
        },
        {
          "source": "0",
          "target": "15"
        },
        {
          "source": "0",
          "target": "16"
        },
        {
          "source": "2",
          "target": "3"
        },
        {
          "source": "4",
          "target": "5"
        },
        {
          "source": "4",
          "target": "6"
        },
        {
          "source": "5",
          "target": "6"
        },
        {
          "source": "7",
          "target": "13"
        },
        {
          "source": "8",
          "target": "14"
        },
        {
          "source": "9",
          "target": "10"
        },
        {
          "source": "10",
          "target": "22"
        },
        {
          "source": "10",
          "target": "14"
        },
        {
          "source": "10",
          "target": "12"
        },
        {
          "source": "10",
          "target": "24"
        },
        {
          "source": "10",
          "target": "21"
        },
        {
          "source": "10",
          "target": "20"
        },
        {
          "source": "11",
          "target": "24"
        },
        {
          "source": "11",
          "target": "22"
        },
        {
          "source": "11",
          "target": "14"
        },
        {
          "source": "12",
          "target": "13"
        },
        {
          "source": "16",
          "target": "17"
        },
        {
          "source": "16",
          "target": "18"
        },
        {
          "source": "16",
          "target": "21"
        },
        {
          "source": "16",
          "target": "22"
        },
        {
          "source": "17",
          "target": "18"
        },
        {
          "source": "17",
          "target": "20"
        },
        {
          "source": "18",
          "target": "19"
        },
        {
          "source": "19",
          "target": "20"
        },
        {
          "source": "19",
          "target": "33"
        },
        {
          "source": "19",
          "target": "22"
        },
        {
          "source": "19",
          "target": "23"
        },
        {
          "source": "20",
          "target": "21"
        },
        {
          "source": "21",
          "target": "22"
        },
        {
          "source": "22",
          "target": "24"
        },
        {
          "source": "22",
          "target": "25"
        },
        {
          "source": "22",
          "target": "26"
        },
        {
          "source": "22",
          "target": "23"
        },
        {
          "source": "22",
          "target": "28"
        },
        {
          "source": "22",
          "target": "30"
        },
        {
          "source": "22",
          "target": "31"
        },
        {
          "source": "22",
          "target": "32"
        },
        {
          "source": "22",
          "target": "33"
        },
        {
          "source": "23",
          "target": "28"
        },
        {
          "source": "23",
          "target": "27"
        },
        {
          "source": "23",
          "target": "29"
        },
        {
          "source": "23",
          "target": "30"
        },
        {
          "source": "23",
          "target": "31"
        },
        {
          "source": "23",
          "target": "33"
        },
        {
          "source": "32",
          "target": "33"
        },
        {
          "source": "10",
          "target": "34"
        },
        {
          "source": "34",
          "target": "35"
        },
        {
          "source": "35",
          "target": "36"
        },
        {
          "source": "36",
          "target": "37"
        },
        {
          "source": "37",
          "target": "38"
        },
        {
          "source": "38",
          "target": "39"
        },
        {
          "source": "39",
          "target": "40"
        },
        {
          "source": "40",
          "target": "10"
        }]
      };

      const nodes = data.nodes;
      const edges = data.edges;

      const group1Nodes = [];
      const group1NodeMap = new Map();
      const group2Nodes = [];
      const group2NodeMap = new Map();
      const group3Nodes = [];
      const group3NodeMap = new Map();

      nodes.forEach((node, i) => {
        if (!node.style) {
          if (i <= 16 && i !== 10 ) {
            node.style = { fill: 'lightsteelblue' };
            group1Nodes.push(node);
            group1NodeMap.set(node.id, i);
          } else if (i > 16 && i < 34) {
            node.style = { fill: 'lightgrey' };
            group2Nodes.push(node);
            group2NodeMap.set(node.id, i);
          } else {
            group3Nodes.push(node);
            group3NodeMap.set(node.id, i);
          }
        } else {
          if (i <= 16 && i !== 12) {
            node.style.fill = 'lightsteelblue';
            group1Nodes.push(node);
            group1NodeMap.set(node.id, i);
          } else if (i > 16) {
            node.style.fill = 'lightgrey';
            group2Nodes.push(node);
            group2NodeMap.set(node.id, i);
          }
        }
      });
      
      const graph = new G6.Graph({
        container: 'mountNode',
        width: 1000,
        height: 600,
        modes: {
          default: ['drag-node']
        },
        defaultNode: {
          size: [20, 20],
          color: 'steelblue'
        },
        defaultEdge: {
          size: 1,
          color: '#e2e2e2'
        }
      });
      graph.data(data);
      graph.render();

      let subForceLayout;
      setTimeout(() => {
        const group1Edges = [];
        const center = [ 700, 100];
        // fix the nodes[0]
        nodes[0].fx = center[0];
        nodes[0].fy = center[1];
        // add related edges
        edges.forEach(edge => {
          const sourceId = edge.source;
          const targetId = edge.target;
          if (group1NodeMap.get(sourceId) !== undefined
            && group1NodeMap.get(targetId) !== undefined) {
            group1Edges.push(edge);
          }
        });
        
        subForceLayout = new G6.Layout['force']({
          center,
          linkDistance: 70,
          preventOverlap: true,
          nodeSize: 20,
          tick() {  // the tick function to show the animation of layout process
            graph.refreshPositions();
          }
        });
        subForceLayout.init({
          'nodes': group1Nodes,
          'edges': group1Edges
        });
        subForceLayout.execute();
      }, 1000);

      setTimeout(() => {
        subForceLayout.forceSimulation && subForceLayout.forceSimulation.stop();
        const group2Edges = [];
        // add related edges
        edges.forEach(edge => {
          const sourceId = edge.source;
          const targetId = edge.target;
          if (group2NodeMap.get(sourceId) !== undefined
            && group2NodeMap.get(targetId) !== undefined) {
            group2Edges.push(edge);
          }
        });
        
        const subRadialLayout = new G6.Layout['radial']({
          focusNode: '22',
          center: [ 250, 150 ],
          preventOverlap: true,
          nodeSize: 20,
          unitRadius: 50
        });
        subRadialLayout.init({
          'nodes': group2Nodes,
          'edges': group2Edges
        });
        subRadialLayout.execute();
        graph.positionsAnimate();
      }, 2500);

      setTimeout(() => {
        const group3Edges = [];
        // add related edges
        edges.forEach(edge => {
          const sourceId = edge.source;
          const targetId = edge.target;
          if (group3NodeMap.get(sourceId) !== undefined
            && group3NodeMap.get(targetId) !== undefined) {
            group3Edges.push(edge);
          }
        });
        
        const subCircularLayout = new G6.Layout['circular']({
          center: [ 500, 450 ],
          radius: 100
        });
        subCircularLayout.init({
          'nodes': group3Nodes,
          'edges': group3Edges
        });
        subCircularLayout.execute();
        graph.positionsAnimate();
      }, 4000);
    </script>
  </body>

</html>